<template>
  <div class="simulation-panel entity-list">
    <div class="toolbar">
      <span class="title">实体列表</span>
      <a @click="handleClose"><el-icon><Close /></el-icon></a>
    </div>
    <div class="container">
      <el-tabs v-model="activeKey" type="card" class="panel-tabs">
        <el-tab-pane
          v-for="key in Object.keys(treeData)"
          :name="key"
          :key="key"
          :label="key === 'red' ? '红方' : '蓝方'"
        >
        <el-scrollbar>
          <div class="entity-item" v-for="item in treeData[key]" :key="item.id">
            {{ item.index }}
            <img :src="item.iconUrl" style="width: 18px; height: 18px" />
            {{ item.name }}
          </div>
        </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch } from "vue";
import { Close } from '@element-plus/icons-vue';
import type { TreeProps } from "ant-design-vue";
import { simulationState } from "@/pinia/stores/index";
import { IEntityInfoPanel } from "@@/typings/panel";
import { simulPanelState } from "@/pinia/stores/index";

const simulStore = simulationState();
const panelStore = simulPanelState();

// 响应式状态
const state = reactive<{
  activeKey: string;
  fieldNames: TreeProps["fieldNames"];
  treeData: {
    red: IEntityInfoPanel[];
    blue: IEntityInfoPanel[];
  };
}>({
  activeKey: "red",
  fieldNames: {
    children: "children",
    title: "name",
    key: "id",
  },
  treeData: simulStore.entityList,
});

// 关闭面板
const handleClose = () => {
  panelStore.entityPanelShow = false;
};

// 监听实体列表变化
watch(
  () => simulStore.entityList,
  (newVal) => {
    state.treeData.red = newVal.red;
    state.treeData.blue = newVal.blue;
  }
);

// 暴露状态
const { activeKey, treeData } = toRefs(state);
</script>

<style lang="less">
@import "@@/assets/styles/panel.less";
</style>

<style lang="less" scoped>
.entity-item {
  padding: 4px 8px;
  color: white;
  border-bottom: 1px solid transparent;
}
</style>
